<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
	{$ProName$}
</title>
<style type="text/css">
body{background:#f7f7f7;}
a{color:#333333; text-decoration:none}
a:hover{color:#666666; text-decoration:underline}
.Pro_Info{text-align:center;padding:10px 0;border-bottom:1px solid #ccc;}
.Pro_Info h1 em{font-size:12px;color:#999;font-weight:normal;}
.Pro_Info h1 a:link,.Pro_Info h1 a:visited{color:#333;}
.Pro_Images{padding-top:10px;}
.Pro_Images img{display:inline;width:98px;height:98px;margin:0 5px;border:1px solid #ccc;filter:alpha(opacity=30);opacity:0.3;}
.Pro_Images .active{filter:alpha(opacity=100);opacity:1;border-color:#999;}
.Pro_Pagination{background:#fff;padding:5px 0;text-align:center;font-size:14px;}
.Pro_BigImage{text-align:center;background:#fff;}
.Pro_BigImage img{margin:0 auto;cursor:pointer;}
.Pro_Link{border-top:1px solid #ccc;padding:5px 0;text-align:center;font-size:14px;}
.Pro_Text{height:0px;overflow:hidden;}
</style>
<LINK href="[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]favicon.ico" rel="shortcut icon">
    <script src="[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]scripts/productalbum.js" type="text/javascript"></script>
<script type="text/javascript">
var currNum;
var maxNum;
var imgUrl;
function getNum(action){
	currNum=parseInt($(".Pro_BigImage img").get(0).name);
	$(".Pro_Images img").each(function(){
		$(this).removeClass("active");
		this.style.filter="alpha(opacity=30)";
		this.style.opacity="0.3";
	})
	if (action=="prev"){
		if (currNum==0){currNum=maxNum};
		$(".Pro_Images img").get(currNum-1).className="active";
		$(".Pro_Images img").get(currNum-1).style.filter="alpha(opacity=100)";
		$(".Pro_Images img").get(currNum-1).style.opacity="1";
		$(".Pro_BigImage img").hide();
		$(".Pro_BigImage img").get(0).src=imgUrl+$(".Pro_Images img").get(currNum-1).name.split("||")[1];
		$(".Pro_BigImage img").get(0).name=$(".Pro_Images img").get(currNum-1).name.split("||")[0];
		$(".Pro_BigImage img").fadeIn();
		$("#page_1").html(currNum+"/"+maxNum);
		$("#page_2").html(currNum+"/"+maxNum);
	}else{
		if (currNum==maxNum-1){currNum=-1};
		$(".Pro_Images img").get(currNum+1).className="active";
		$(".Pro_Images img").get(currNum+1).style.filter="alpha(opacity=100)";
		$(".Pro_Images img").get(currNum+1).style.opacity="1";
		$(".Pro_BigImage img").hide();
		$(".Pro_BigImage img").get(0).src=imgUrl+$(".Pro_Images img").get(currNum+1).name.split("||")[1];
		$(".Pro_BigImage img").get(0).name=$(".Pro_Images img").get(currNum+1).name.split("||")[0];
		$(".Pro_BigImage img").fadeIn();
		$("#page_1").html(parseInt(currNum+2)+"/"+maxNum);
		$("#page_2").html(parseInt(currNum+2)+"/"+maxNum);
	}
}
function initNum(){
	maxNum=	parseInt($(".Pro_Images img").length);
	imgUrl="";
	$(".Pro_Images img").get(0).className="active";
	$(".Pro_BigImage").append("<img src='"+ imgUrl + $(".Pro_Images img").get(0).name.split("||")[1] +"' name='"+ $(".Pro_Images img").get(0).name.split("||")[0] +"' alt='点击查看下一张'>");
	$(".Pro_BigImage img").click(function(){
		getNum("next");
	})
	$("#page_1").html("1/"+maxNum);
	$("#page_2").html("1/"+maxNum);
}
$(function(){
	initNum();
	$(".Pro_Images img").mouseover(function(){
		this.style.filter="alpha(opacity=100)";
		this.style.opacity="1";
	}).mouseout(function(){
		if (this.className!="active"){
			this.style.filter="alpha(opacity=30)";
			this.style.opacity="0.3";
		}
	}).click(function(){
		$(".Pro_Images img").each(function(){
			$(this).removeClass("active");
			this.style.filter="alpha(opacity=30)";
			this.style.opacity="0.3";
		})
		this.className="active";
		this.style.filter="alpha(opacity=100)";
		this.style.opacity="1";
		$(".Pro_BigImage img").hide();
		$(".Pro_BigImage img").get(0).src=imgUrl+this.name.split("||")[1];
		$(".Pro_BigImage img").get(0).name=this.name.split("||")[0];
		$(".Pro_BigImage img").fadeIn();
		$("#page_1").html(parseInt(this.name.split("||")[0])+1+"/"+maxNum);
		$("#page_2").html(parseInt(this.name.split("||")[0])+1+"/"+maxNum);
	})
})
	function Pro()
	{
	  var Show=document.getElementById("Counts").value;
	  var tShow=document.getElementById("tCounts").value;
	  if(Show==1)
	  {
	    document.getElementById("Show1").style.display="";
	  }
	  else
	  {
	   for(var i=1;i<eval(tShow)+1;i++)
	  {
	      if((eval(Show)-1)==eval(i))
	      {
	         document.getElementById("Show"+(eval(Show)-1)).style.display="";
	       }
	       else
	       {
	           document.getElementById("Show"+i).style.display="none";
	        }
	   }
	      document.getElementById("Counts").value=eval(Show)-1;
		  }
	}
	function Nex()
	{
	  var Show=document.getElementById("Counts").value;
	  var tShow=document.getElementById("tCounts").value;
	  alert(tShow)
	  if(tShow==Show)
	  {
	    document.getElementById("Show"+tShow).style.display="";
	  }
	  else
	  {
	  for(var i=1;i<eval(tShow)+1;i++)
	  {
	      if((eval(Show)+1)==eval(i))
	      {
	         document.getElementById("Show"+(eval(Show)+1)).style.display="";
	       }
	       else
	       {
	           document.getElementById("Show"+i).style.display="none";
	        }
	  }
	      document.getElementById("Counts").value=eval(Show)+1;
		  }
	}
</script>
</head>
<body>
    <div class="Pro_Info">
    <table width="300" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><span style="color:#3366CC; font-size:16px;font-weight:bold">{$ProName$}</span></td>
        </tr>
        <tr>
            <td>
               <span style="color:#CCCCCC;font-size:12px">(商品编号：{$ProNO$})</span>
               <a href="{$ProductURL$}"><img src='[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]templates/yxshop_template/green/images/button_buy.gif' border='0'></a>
            </td>
        </tr>
    </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right"><div>
      <input name="Counts" id="Counts" type="hidden" value="1" /></div></td>
    <td align="right"><a href="javascript:Pro()"><img src="[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]templates/yxshop_template/green/images/9423218.gif" border="0" /></a></td>
    <td><div class="Pro_Images">
        [YX:unLoop,YX:LableType=OtherProduct,YX:Option=ProductAlbum][/YX:unLoop]
        </div></td>
    <td align="left"><div ><a href="javascript:Nex()"><img src="[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]templates/yxshop_template/green/images/9423216.gif"  border="0"/></a></div></td>
    <td align="left">&nbsp;</td>
  </tr>
</table>

   </div>
        <div class="Pro_Pagination">
        <a href="javascript:getNum('prev')" >上一张</a>&nbsp;&nbsp;&nbsp;<em id="page_1">
        </em>&nbsp;&nbsp;&nbsp;<a href="javascript:getNum('next')" >下一张</a></div>
        <div class="Pro_BigImage"></div>
        <div class="Pro_Pagination"><a href="javascript:getNum('prev')" >上一张</a>&nbsp;&nbsp;&nbsp;<em id="page_2"></em>&nbsp;&nbsp;&nbsp;<a href="javascript:getNum('next')" >下一张</a></div>
        <div class="Pro_Link">
        <a href="[YX:unLoop,YX:LableType=SystemSetup,YX:SystemParameter=WebDummyPath][/YX:unLoop]default.aspx">返回商城首页</a>&nbsp;&nbsp;&nbsp;<a href="javascript:window.close()">返回商品页</a></div>
        
       
</body>
</html>

